<!DOCTYPE HTML >
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
  <meta charset="UTF-8">
  <title>Welkom bij KroketWeb - Bestel je vette hap online</title>
  <link href="css/default.css" rel="stylesheet" type="text/css"/>
							
  <script type="text/javascript">
  {literal}

  // add item to cart with JSON
  function addToCart(id) {
      $.getJSON('addtocart.php', {'id' : id}, function(response) {
//	alert(response.id);
        $('[name="product"]').val(response[0].omschrijving);
      });
  }

  // drag and drop
  $(function() {

    $( "#catalogus span" ).draggable({
      appendTo: "body",
      helper: "clone"
    });

    $("#winkelwagen").droppable({
      drop: function(event, ui ) {
        addToCart(ui.draggable.attr('id'));
      }
    });


  });


  {/literal}					
  </script>
</head>
<body>
<div class="top">
  <img src="images/logo.jpg" alt="">
</div>

<div class="left">
<span class="sponsortitle">Menu</span>

<span class="sponsorlist">
  <ul>
    <li><a href="index.php">Home</a><li>
    <li><a href="assortiment.php">Assortiment</a></li>
    <li><a href="zoek.php">Zoek</a></li>
    <li><a href="afrekenen.php">Afrekenen</a></li>
  </ul>
</span>
</div>

<div class="middle">
  <h3>Overzicht producten</h3>
  
  <div id="berichtenNavigatie">

  </div>



  <table id="catalogus">
    <tr>
      <th width="260">Product</th>
      <th>Prijs(Euro)</th>
      <th>Op voorraad</th>
    </tr>
    {section name="i" loop="$producten"}
    <tr>					
      <td><span id="{$producten[i].id}">{$producten[i].omschrijving}</span></td>
      <td>{$producten[i].prijs}</td>
      <td bgcolor="lightgreen">{$producten[i].voorraad}</td>
    </tr>
    {/section}
</table>
					
<table>	
  <tr>
    <td>Producten per pagina</td>
    <td>
     <form method="GET" action="assortiment.php">
     <SELECT NAME="getPage" onchange="this.form.submit()">
       <option value=" "> </option>
       <option value="5">5</option>
       <option value="10">10</option>
       <option value="15">15</option>
     </SELECT>
     </FORM>
   </td>
   <td>
   </td>
   <td align="right">
   {section name="i" loop="$pages"}
     | <a href="?offset={$pages[i].offset}&poffset={$pages[i].poffset}&getPage={$pages[i].getPage}">{$smarty.section.i.index}</a> |
   {/section}
   </td>
 </tr>
</table>
</div>

<div class="right">
  <span class="sponsortitle">Sponsors</span>
  <span class="sponsorlist">
    <ul>
      <li><a href="http://www.remia.nl">Lemia: Vool de lekkelste flietsaus</a></li>
      <li><a href="http://www.mola.nl">Mola snacks: eerlijk en lekker</a></li>
      <li><a href="http://www.arts.nl">Sonya Backer: Snacken is gezond</a></li>
    </ul>
  </span>
  
  <h4>Inhoud winkelmandje</h4>

  <script type="text/javascript">
  {literal}
  <!--
  function removeItem(item) {
    var answer = confirm ('Weet je zeker dat je dit product wilt verwijderen?')
    if (answer)
    window.location="delete_cart_item.php?item=" + item;
  }

  function removeCart() {
    var answer = confirm ('Weet je zeker dat je de winkelwagen wilt leeghalen?')
    if (answer)
    window.location="delete_cart.php";
  }
  //-->
  {/literal}
  </script>

  <form method="post" name="form" action="update_cart.php">
  <table id="winkelwagen" class="ui-widget-content">
    <tr>
      <td><b>Productnaam</b></td>
      <td>&nbsp;</td>
      <td><b>Prijs</b></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input type="text" name="product"/></td>
      <td><input type="hidden" name="productnummer_1" value="5" />
      <td>18.2</td>
      <td><a href="javascript:removeItem(1)">X</td>
    </tr>
    <tr>
      <td colspan="4"><b>Totaal</b></td>
      <td><b>18.2</b></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
  </table>
  </form>

 </div>
</body>
</html>

